<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/7/3
  Time: 9:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订票第一步</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href='http://fonts.useso.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <link href="css/gozha-nav.css" rel="stylesheet" />
    <link href="css/external/jquery.selectbox.css" rel="stylesheet" />
    <link href="css/external/idangerous.swiper.css" rel="stylesheet" />
    <link href="css/style.css?v=1" rel="stylesheet" />
    <script src="js/external/modernizr.custom.js"></script>
</head>
<body>
<div class="wrapper">
    <!-- 头部导航栏-->
    <hearder>
        <jsp:include page="header.jsp"></jsp:include>
    </hearder>
    <!-- 搜索框-->
    <jsp:include page="search.jsp"></jsp:include>
    <!-- Main content -->
    <section class="container">
        <div class="order-container">
            <div class="order">
                <img class="order__images" alt='' src="images/tickets.png">
                <p class="order__title">订一张票 <br><span class="order__descript">享受快乐的电影时光</span></p>
                <div class="order__control">
                    <a href="book3-buy.jsp" class="order__control-btn">购买</a>

                </div>
            </div>
        </div>
        <div class="order-step-area">
            <div class="order-step first--step order-step--disable ">1.什么？何时何地？</div>

            <h2 class="page-heading heading--outcontainer">选择一部电影</h2>
    </section>
    <div class="choose-film">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!--First Slide-->
                <div class="swiper-slide" data-film='..'>
                    <div class="film-images">
                        <img alt='' src="images/380-60.png">
                    </div>
                    <p class="choose-film__title">..</p>
                </div>

                <!--Second Slide-->
                <div class="swiper-slide" data-film='一条狗的使命'>
                    <div class="film-images">
                        <img alt='' src="images/380-60.png">
                    </div>
                    <p class="choose-film__title">一条狗的使命</p>
                </div>

                <!--Third Slide-->
                <div class="swiper-slide" data-film='千与千寻'>
                    <div class="film-images">
                        <img alt='' src="images/380-60.png">
                    </div>
                    <p class="choose-film__title">千与千寻</p>
                </div>

                <!--Four Slide-->
                <div class="swiper-slide" data-film='..'>
                    <div class="film-images">
                        <img alt='' src="images/380-60.png">
                    </div>
                    <p class="choose-film__title">..</p>
                </div>

                <!--Five Slide-->
                <div class="swiper-slide" data-film='..'>
                    <div class="film-images">
                        <img alt='' src="images/380-60.png">
                    </div>
                    <p class="choose-film__title">..</p>
                </div>

                <!--Six Slide-->
                <div class="swiper-slide" data-film='..'>
                    <div class="film-images">
                        <img alt='' src="images/380-60.png">
                    </div>
                    <p class="choose-film__title">..</p>
                </div>

                <!--Seven Slide-->
                <div class="swiper-slide" data-film='..'>
                    <div class="film-images">
                        <img alt='' src="images/380-60.png">
                    </div>
                    <p class="choose-film__title">..</p>
                </div>

                <!--Eight Slide-->
                <div class="swiper-slide" data-film='..'>
                    <div class="film-images">
                        <img alt='' src="images/380-60.png">
                    </div>
                    <p class="choose-film__title">..</p>
                </div>

                <!--Nine Slide-->
                <div class="swiper-slide" data-film='..'>
                    <div class="film-images">
                        <img alt='' src="images/380-60.png">
                    </div>
                    <p class="choose-film__title">..</p>
                </div>

                <!--Ten Slide-->
                <div class="swiper-slide" data-film='..'>
                    <div class="film-images">
                        <img alt='' src="images/380-60.png">
                    </div>
                    <p class="choose-film__title">..</p>
                </div>
            </div>
        </div>
    </div>

    <section class="container">
        <div class="col-sm-12">
            <div class="choose-indector choose-indector--film">
                <strong>选择: </strong><span class="choosen-area"></span>
            </div>

            <h2 class="page-heading">城市 与 日期</h2>

            <div class="choose-container choose-container--short">
                <form id='select' class="select" method='get'>
                    <select name="select_item" id="select-sort" class="select__sort" tabindex="0">
                        <option value="1" selected='selected'>思明区</option>
                        <option value="2">集美区</option>
                        <option value="3">翔安区</option>
                        <option value="4">海沧区</option>
                    </select>
                </form>

                <div class="datepicker">
                    <span class="datepicker__marker"><i class="fa fa-calendar"></i>日期</span>
                    <input type="text" id="datepicker" value='03/10/2014' class="datepicker__input">
                </div>
            </div>

            <h2 class="page-heading">放映时间</h2>

            <div class="time-select time-select--wide">
                <div class="time-select__group group--first">
                    <div class="col-sm-3">
                        <p class="time-select__place">一条狗的使命</p>
                    </div>
                    <ul class="col-sm-6 items-wrap">
                        <li class="time-select__item" data-time='09:40'>09:40</li>
                        <li class="time-select__item" data-time='13:45'>13:45</li>
                        <li class="time-select__item" data-time='15:45'>15:45</li>
                        <li class="time-select__item" data-time='19:50'>19:50</li>
                        <li class="time-select__item" data-time='21:50'>21:50</li>
                    </ul>
                </div>

                <div class="time-select__group">
                    <div class="col-sm-3">
                        <p class="time-select__place">千与千寻</p>
                    </div>
                    <ul class="col-sm-6 items-wrap">
                        <li class="time-select__item" data-time='10:45'>10:45</li>
                        <li class="time-select__item" data-time='16:00'>16:00</li>
                        <li class="time-select__item" data-time='19:00'>19:00</li>
                        <li class="time-select__item" data-time='21:15'>21:15</li>
                        <li class="time-select__item" data-time='23:00'>23:00</li>
                    </ul>
                </div>

                <div class="time-select__group">
                    <div class="col-sm-3">
                        <p class="time-select__place">..</p>
                    </div>
                    <ul class="col-sm-6 items-wrap">
                        <li class="time-select__item" data-time='09:00'>09:00</li>
                        <li class="time-select__item" data-time='11:00'>11:00</li>
                        <li class="time-select__item" data-time='13:00'>13:00</li>
                        <li class="time-select__item" data-time='15:00'>15:00</li>
                        <li class="time-select__item" data-time='17:00'>17:00</li>
                        <li class="time-select__item" data-time='19:00'>19:00</li>
                        <li class="time-select__item" data-time='21:00'>21:00</li>
                        <li class="time-select__item" data-time='23:00'>23:00</li>
                        <li class="time-select__item" data-time='01:00'>01:00</li>
                    </ul>
                </div>

                <div class="time-select__group">
                    <div class="col-sm-3">
                        <p class="time-select__place">..</p>
                    </div>
                    <ul class="col-sm-6 items-wrap">
                        <li class="time-select__item" data-time='10:45'>10:45</li>
                        <li class="time-select__item" data-time='16:00'>16:00</li>
                        <li class="time-select__item" data-time='19:00'>19:00</li>
                        <li class="time-select__item" data-time='21:15'>21:15</li>
                        <li class="time-select__item" data-time='23:00'>23:00</li>
                    </ul>
                </div>

                <div class="time-select__group group--last">
                    <div class="col-sm-3">
                        <p class="time-select__place">..</p>
                    </div>
                    <ul class="col-sm-6 items-wrap">
                        <li class="time-select__item" data-time='17:45'>17:45</li>
                        <li class="time-select__item" data-time='21:30'>21:30</li>
                        <li class="time-select__item" data-time='02:20'>02:20</li>
                    </ul>
                </div>
            </div>

            <div class="choose-indector choose-indector--time">
                <strong> </strong><span class="choosen-area"></span>
            </div>
        </div>

    </section>

    <div class="clearfix"></div>

    <form id='film-and-time' class="booking-form" method='get' action='book2.html'>
        <input type='text' name='choosen-movie' class="choosen-movie">

        <input type='text' name='choosen-city' class="choosen-city">
        <input type='text' name='choosen-date' class="choosen-date">

        <input type='text' name='choosen-cinema' class="choosen-cinema">
        <input type='text' name='choosen-time' class="choosen-time">


        <div class="booking-pagination">
            <a href="#" class="booking-pagination__prev hide--arrow">
                <span class="arrow__text arrow--prev"></span>
                <span class="arrow__info"></span>
            </a>
            <a href="book2.html" class="booking-pagination__next">
                <span class="arrow__text arrow--next">下一步</span>
                <span class="arrow__info">选择座位</span>
            </a>
        </div>

    </form>
    <!-- 底部-->
    <jsp:include page="footer.jsp"></jsp:include>
<!-- JavaScript-->
<!-- jQuery 1.9.1-->
<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/external/jquery-1.10.1.min.js"><\/script>')</script>
<!-- Migrate -->
<script src="js/external/jquery-migrate-1.2.1.min.js"></script>
<!-- jQuery UI -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Bootstrap 3-->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

<!-- Mobile menu -->
<script src="js/jquery.mobile.menu.js"></script>
<!-- Select -->
<script src="js/external/jquery.selectbox-0.2.min.js"></script>
<!-- Swiper slider -->
<script src="js/external/idangerous.swiper.min.js"></script>

<!-- Form element -->
<script src="js/external/form-element.js"></script>
<!-- Form validation -->
<script src="js/form.js"></script>

<!-- Custom -->
<script src="js/custom.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        init_BookingOne();
    });
</script>
</body>
</html>
